<template>
  <view class="login-container">
    <view class="login-box">
      <!-- 应用名称 -->
      <view class="logo-box">
        <text class="app-name">聚合码</text>
      </view>

      <!-- 登录表单 -->
      <view class="form-box">
        <!-- 手机号输入 -->
        <view class="form-item">
          <view class="input-box">
            <text class="icon">📱</text>
            <input 
              class="input" 
              type="number" 
              maxlength="11"
              v-model="phone" 
              placeholder="请输入手机号"
              placeholder-class="placeholder"
            />
          </view>
        </view>

        <!-- 验证码输入 -->
        <view class="form-item">
          <view class="input-box">
            <text class="icon">🔒</text>
            <input 
              class="input code-input" 
              type="number" 
              maxlength="6"
              v-model="code" 
              placeholder="请输入验证码"
              placeholder-class="placeholder"
            />
            <button 
              class="code-btn" 
              :disabled="codeBtnDisabled"
              @click="handleSendCode"
            >
              {{ codeBtnText }}
            </button>
          </view>
        </view>

        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :disabled="loginBtnDisabled"
          @click="handleLogin"
        >
          登录
        </button>

        <!-- 提示文字 -->
        <view class="tips">
          <text class="tips-text">首次登录将自动注册账号</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { sendSms, login } from '@/api/user.js'

export default {
  data() {
    return {
      phone: '', // 手机号
      code: '', // 验证码
      codeBtnDisabled: false, // 验证码按钮是否禁用
      codeBtnText: '获取验证码', // 验证码按钮文字
      countdown: 60, // 倒计时秒数
      timer: null // 定时器
    }
  },
  computed: {
    // 登录按钮是否禁用
    loginBtnDisabled() {
      return !this.phone || this.phone.length !== 11 || !this.code || this.code.length !== 6
    }
  },
  onLoad() {
    // 检查是否已登录
    const token = uni.getStorageSync('token')
    if (token) {
      // 已登录，跳转到首页
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 发送验证码
    async handleSendCode() {
      // 验证手机号
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (this.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 验证手机号格式
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(this.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '发送中...'
        })
        
        // 调用发送验证码接口
        await sendSms(this.phone)
        
        uni.hideLoading()
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        
        // 开始倒计时
        this.startCountdown()
        
      } catch (error) {
        uni.hideLoading()
        console.error('发送验证码失败:', error)
        uni.showToast({
          title: '发送失败，请重试',
          icon: 'none'
        })
      }
    },
    
    // 开始倒计时
    startCountdown() {
      this.codeBtnDisabled = true
      this.countdown = 60
      this.codeBtnText = `${this.countdown}s后重试`
      
      this.timer = setInterval(() => {
        this.countdown--
        this.codeBtnText = `${this.countdown}s后重试`
        
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.codeBtnDisabled = false
          this.codeBtnText = '获取验证码'
        }
      }, 1000)
    },
    
    // 登录
    async handleLogin() {
      // 验证手机号
      if (!this.phone || this.phone.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 验证验证码
      if (!this.code || this.code.length !== 6) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '登录中...'
        })
        
        // 调用登录接口
        const res = await login({
          phone: this.phone,
          code: this.code
        })
        
        uni.hideLoading()
        
        // 保存token
        uni.setStorageSync('token', res.data.token)
        // 保存用户信息
        uni.setStorageSync('userInfo', res.data)
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 延迟跳转到首页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        console.error('登录失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.login-box {
  width: 100%;
  max-width: 600rpx;
}

.logo-box {
  text-align: center;
  margin-bottom: 80rpx;
}

.app-name {
  font-size: 64rpx;
  color: #fff;
  font-weight: bold;
  display: block;
}

.form-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 30rpx;
}

.input-box {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 12rpx;
  padding: 24rpx 30rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s;
}

.input-box:focus-within {
  background: #fff;
  border-color: #667eea;
}

.icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.code-input {
  flex: 1;
}

.placeholder {
  color: #999;
}

.code-btn {
  margin-left: 20rpx;
  padding: 12rpx 24rpx;
  background: #667eea;
  color: #fff;
  font-size: 24rpx;
  border-radius: 8rpx;
  border: none;
  white-space: nowrap;
}

.code-btn::after {
  border: none;
}

.code-btn[disabled] {
  background: #ccc;
  color: #999;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  border: none;
  margin-top: 40rpx;
  font-weight: bold;
}

.login-btn::after {
  border: none;
}

.login-btn[disabled] {
  background: #ccc;
  opacity: 0.6;
}

.tips {
  text-align: center;
  margin-top: 30rpx;
}

.tips-text {
  font-size: 24rpx;
  color: #999;
}
</style>

